  <template>
  	<view class="content">
  		<view class="block swiper-block">
  			<swiper autoplay="true" indicator-dots="true" indicator-color="#999" indicator-active-color="#fff"
  				class="swiper-item">
  				<swiper-item :item-id="item.id" v-for="(item,index) in swiperList" :key="item.id" class="bg-item">
  					<image :src="item.imgUrl" class="bg-img"></image>
  				</swiper-item>
  			</swiper>
  		</view>
  		<!-- <CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="false" :custom="custom"
			:title="'文明玉门随手拍'"></CustomNav> -->
  		<button type="default" open-type="share" @ShareAppMessage="onShareAppMessage()" class="share-btn">转发</button>
  		<view class="info-block">
  			<view class="news-block">
  				<view class="news-list">
  					<view class="login">
  						<view class="login-item">
  							<image src="../../static/home/user-5-fill.png" class="login-img"></image>
  							<view class="FangZhengHanZhenGuangBiaoJianTi title">
  								{{user.userName.length>0?user.userName:'微信用户'}}
  							</view>
  						</view>
  						<button class="btn" v-if="!user.mobile.length>0" open-type="getPhoneNumber"
  							@getphonenumber="getPhoneNumber">登录</button>
  						<view v-else class="revise-item"
  							@click="navigate('/page_other/personal-information/personal-information')">
  							<view class="revise">修改个人信息</view>
  							<image src="../../static/mine/more.png" style="width: 40rpx; height: 40rpx;">
  							</image>
  						</view>
  					</view>
  					<!-- <view class="notice">
  						<view class="title-item">
  							<image src="../../static/home/notice.png" class="notice-img"></image>
  							<view class="thread"></view>
  						</view> -->
  					<!-- <view class="notice swiper-item">
  							<swiper autoplay="true" class="notice-list" vertical="true" interval="8000">
  								<swiper-item v-for="(item,index) in newsList" :key="item.id" :item-id="item.id"
  									class="notice-item" @click="navigate('/page_other/notice/detail?id='+item.id)">
  									<view class="news">{{item.title}}</view>
  								</swiper-item>
  							</swiper>
  						</view> 
  					</view>-->
  				</view>
  			</view>
  			<view class="info-item">
  				<view class="conveniently-item" @click="navigate('/page_other/clap/clap')">
  					<!-- <image src="/static/home/conveniently.png" class="clap-img"></image> -->
  					<view style="display: flex;flex-direction: row; align-items: center; margin-top: 110rpx;">
  						<image src="/static/home/clap.png" class="clap-img"></image>
  						<view class="FangZhengHanZhenGuangBiaoJianTi text">文明玉门随手拍</view>
  					</view>
  					<view class="advise">畅通市民监督投诉渠道，引导市民积极谏言献策</view>
  				</view>
  				<view class=" menu-block">
  					<view @click="menuJump(item.url,item.id)" class="menu-list" v-for="(item,index) in menuList"
  						:key="item.id">
  						<view class="menu-item">
  							<image :src="item.iconImg" class="menu-img"></image>
  							<view class="menu">{{item.menu}}</view>
  						</view>
  					</view>
  				</view>
  			</view>
  		</view>
  	</view>

  </template>

  <script>
  	import {
  		isLogin
  	} from '@/util/user.js'
  	import {
  		getCustomNavData,
  		showDevelopingTips
  	} from '@/util/util.js';
  	import {
  		loginApi
  	} from '@/api/login.js'
  	import {
  		getStorage,
  		setStorage
  	} from '@/util/auth.js';
  	import {
  		getNewsList as getNewsListApi,
  		getwhiteListApi
  	} from '@/api/home.js'
  	export default {
  		data() {
  			return {
  				custom: null,
  				topBgColor: 'rgba(0,0,0,0)',
  				titleColor: '#fff',
  				swiperList: [{
  						id: 1,
  						imgUrl: 'http://ssp.yumentv.cn/api/file/yumen/2.png'
  					},
  					{
  						id: 2,
  						imgUrl: 'http://ssp.yumentv.cn/api/file/yumen/3.png'
  					},
  					{
  						id: 3,
  						imgUrl: 'http://ssp.yumentv.cn/api/file/yumen/4.png'
  					},
  					{
  						id: 4,
  						imgUrl: 'http://ssp.yumentv.cn/api/file/yumen/1.png'
  					}
  				],
  				newsList: [],
  				menuList: [{
  						id: 1,
  						iconImg: '/static/home/look-everyone.png',
  						menu: '看看大家',
  						url: '/page_other/look/look'
  					},
  					{
  						id: 2,
  						iconImg: '/static/home/ranking-list.png',
  						menu: '排行榜',
  						url: '/page_other/ranking-list/ranking-list'
  					},
  					{
  						id: 3,
  						iconImg: '/static/home/work-flow.png',
  						menu: '工作流程',
  						url: '/page_other/work-flow/work-flow'
  					},
  					// {
  					// 	id: 4,
  					// 	iconImg: '/static/home/tips.png',
  					// 	menu: '随手拍提示',
  					// 	url: '/page_other/tip/tip?type=2&name=我的随手拍提示'
  					// },
  					{
  						id: 5,
  						iconImg: '/static/home/superintend.png',
  						menu: '督察交办',
  						url: '/page_other/superintend/superintend'
  					},
  					// {
  					// 	id: 6,
  					// 	iconImg: '/static/home/other.png',
  					// 	menu: '其他'
  					// }
  				],
  				user: {
  					mobile: '',
  					userName: '',
  					faceUrl: '',
  					openId: ''
  				},
  				openIdList: [],
  				state: 0,
  				info: {},
  				//设置默认的分享参数
  				share: {
  					title: '玉门随手拍小程序分享',
  					path: '/pages/home/index',
  					imageUrl: 'https://ssp.yumentv.cn/api/file/LOGO3.png', //图片链接，必须是网络连接，后面拼接时间戳防止本地缓存,
  					desc: '',
  					content: ''
  				},

  			}

  		},
  		onPageScroll(e) {
  			if (e.scrollTop >= 50) {
  				this.topBgColor = '#32CCCA';
  			} else {
  				this.topBgColor = 'rgba(0,0,0,0)';
  			}
  		},
  		onShareAppMessage(res) {
  			if (res.from === 'button') { // 来自页面内分享按钮
  				console.log(res.target)
  			}
  			return {
  				title: this.share.title,
  				path: this.share.path,
  				imageUrl: this.share.imageUrl,
  				desc: this.share.desc,
  				content: this.share.content,
  			}
  		},
  		methods: {
  			onShareAppMessage(e) {
  				console.log(e, '转发了');
  			},
  			navigate(url) {
  				uni.navigateTo({
  					url
  				})
  			},
  			menuJump(url, id) {
  				if (id != 5) {
  					if (url) {
  						uni.navigateTo({
  							url: url + '?id=' + id
  						})
  					} else {
  						showDevelopingTips();
  					}
  				} else {
  					let list = this.openIdList
  					list.forEach((item, index) => {
  						if (item.openId == this.user.openId) {
  							this.state = 1
  							uni.navigateTo({
  								url
  							})
  						}
  					})
  					if (this.state == 0) {
  						uni.showToast({
  							title: '暂无权限',
  							icon: 'none'
  						})
  					}
  				}
  			},

  			getOpenIdList() {
  				getwhiteListApi({}).then(res => {
  					this.openIdList = res || [];
  				}).catch(() => {
  					uni.hideLoading()
  				})
  			},
  			getPhoneNumber(e) {
  				if (!e.detail.code) {
  					this.showToast('取消了授权');
  					return;
  				}
  				uni.showLoading({
  					title: '提交中',
  					mask: true,
  				})
  				wx.login({
  					success: (login) => {
  						const code = login.code;
  						loginApi({
  							code: e.detail.code,
  							code1: code
  						}).then((res) => {
  							uni.hideLoading()
  							const loginInfo = {
  								token: res.token,
  								...res.user
  							};
  							this.user = res.user
  							setStorage('login', loginInfo, 604800);
  							this.showToast('登录成功');
  						})
  					}
  				})
  			},
  			getNewsList() {
  				getNewsListApi().then(data => {
  					this.newsList = data;
  				})
  			}
  		},
  		onShow() {
  			const loginInfo = getStorage('login');
  			if (loginInfo) {
  				this.user = loginInfo
  			}
  		},
  		onLoad() {
  			this.custom = getCustomNavData();
  			this.getNewsList()
  			this.getOpenIdList()
  		}
  	}
  </script>

  <style lang="scss" scoped>
  	.content {
  		width: 100%;

  		.block.swiper-block {
  			height: 560rpx;
  			width: 100%;

  			.swiper-item {
  				width: 100%;
  				height: 560rpx;

  				.bg-item {
  					width: 100%;
  					height: 560rpx;

  					.bg-img {
  						width: 100%;
  						height: 560rpx;
  					}
  				}
  			}

  		}

  		.info-block {
  			display: flex;
  			flex-direction: column;
  			//width: 100%;
  			background: #fff;
  			margin-top: -50rpx;
  			border-radius: 60rpx;
  			position: relative;
  			padding: 30rpx;

  			.news-block {
  				margin-top: -140rpx;

  				.news-list {
  					background: rgba(255, 255, 255, 0.8);
  					backdrop-filter: blur(3px);
  					border-radius: 20rpx;
  					box-shadow: 0 0 10px 0 #dedede;
  					padding: 30rpx;

  					.login {
  						display: flex;
  						flex-direction: row;
  						justify-content: space-between;
  						//border-bottom: 1px solid #d4d3d3;
  						align-items: center;
  						height: 80rpx;

  						.login-item {
  							display: flex;
  							flex-direction: row;
  							align-items: center;
  							margin-bottom: 10rpx;

  							.login-img {
  								width: 50rpx;
  								height: 55rpx;
  								margin-right: 10rpx;
  							}

  							.title {
  								//font-weight: bold;
  								font-size: 40rpx;
  							}
  						}


  						.btn {
  							width: 240rpx;
  							height: 65rpx;
  							border-radius: 40rpx;
  							background: #027BFD;
  							color: #fff;
  							display: flex;
  							justify-content: center;
  							align-items: center;
  							margin-bottom: 15rpx;
  							margin-right: 0rpx;
  							font-size: 30rpx;
  						}

  						.revise-item {
  							display: flex;
  							flex-direction: row;
  							align-items: center;

  							.revise {
  								color: #027BFD;
  								font-size: 30rpx;
  							}
  						}
  					}

  					.notice {
  						display: flex;
  						flex-direction: row;
  						justify-content: space-between;
  						height: 70rpx;
  						align-items: center;
  						margin-top: 20rpx;

  						.title-item {
  							display: flex;
  							flex-direction: row;
  							align-items: center;
  							margin-left: 5px;

  							.notice-img {
  								width: 160rpx;
  								height: 46rpx;
  							}

  							.thread {
  								margin-left: 25rpx;
  								width: 4rpx;
  								height: 40rpx;
  								border-radius: 4rpx;
  								background-image: linear-gradient(#fff, #027BFD, #fff);
  							}

  							.title {
  								font-weight: bold;
  								font-size: 42rpx;
  								color: #027BFD;
  								margin-right: 10rpx;

  							}

  							.text {
  								background: #027BFD;
  								color: #fff;
  								font-size: 40rpx;
  								margin-right: 30rpx;

  							}
  						}

  						.notice.swiper-item {
  							height: 60rpx;
  							//border-left: 1.5px solid #027BFD;
  							margin-top: 0;

  							.notice-list {
  								color: #027BFD;
  								width: 420rpx;
  								height: 60rpx;
  								margin-left: 10rpx;

  								.notice-item {
  									height: 60rpx;
  									display: flex;
  									align-items: center;

  									.news {
  										overflow: hidden;
  										text-overflow: ellipsis;
  										white-space: nowrap;
  									}
  								}

  							}
  						}
  					}
  				}
  			}

  			.info-item {
  				margin-top: 40rpx;

  				.conveniently-item {
  					display: flex;
  					flex-direction: column;
  					width: 100%;
  					height: 350rpx;
  					background: url('http://ssp.yumentv.cn/api/file/yumen/6.png') no-repeat center;
  					background-size: 100% 100%;
  					border-radius: 20rpx;

  					.clap-img {
  						width: 60rpx;
  						height: 55rpx;
  						margin-left: 60rpx;
  						margin-right: 30rpx;
  					}

  					.text {
  						color: #fff;
  						font-size: 54rpx;
  						margin-top: 2rpx;

  					}

  					.advise {
  						color: #fff;
  						font-size: 28rpx;
  						margin-left: 60rpx;
  						margin-top: 20rpx;

  					}
  				}

  				.menu-block {
  					display: flex;
  					flex-direction: row;
  					flex-wrap: wrap;
  					margin-top: 40rpx;

  					.menu-list {
  						width: calc(100% / 3);

  						.menu-item {
  							display: flex;
  							flex-direction: column;
  							align-items: center;
  							margin-bottom: 40rpx;

  							.menu-img {
  								width: 110rpx;
  								height: 110rpx;
  							}

  							.menu {
  								margin-top: 20rpx;
  								font-size: 28rpx;
  							}
  						}
  					}
  				}
  			}
  		}
  	}
  </style>